<template>
  <div class="page-home">
    <div class="container">
      <!-- <div class="mySwiper"> -->
          <!-- 使用swiper 轮播图组件 swiperOptions swiper对象实例的参数 -->
      <swiper :options="swiperOptions" ref="swiper1">
        <swiper-slide>
          <img src="./images/focus.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img src="./images/focus1.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img src="./images/focus2.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img src="./images/focus3.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img src="./images/focus4.jpg" />
        </swiper-slide>
        <!-- 添加页码指向器 -->
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
// 导入swiper-awesome 组件
// eslint-disable-next-line standard/object-curly-even-spacing
import { swiper, swiperSlide } from 'vue-awesome-swiper'
// 导入样式 swiper库中的样式
import 'swiper/dist/css/swiper.min.css'

export default {
  data () {
    return {
      swiperOptions: {
        // autoplay: true, // 配置自动播放 (此处配置完全参考 : https://www.swiper.com.cn/api/autoplay/16.html)
        pagination: '.swiper-pagination', // 配置页码指向器
        autoplay: 1000
      }
    }
  },
  computed: {
    swiper () {
      // console.log(this.$refs.swiper1)
      return this.$refs.swiper1.$swiper
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  mounted () {
    // 触发swiper
    // this.swiper.slideTo(3 , 1000 , false)
  }
}
</script>
<style scoped>
/* 设置当前组件样式 : 设置lang 属性 来指定编写样式的语言 默认为css , 可以设置为:less / scss / stylus  */
  .mySwiper{
    width:730px;
    margin: 20px auto;
  }

  .swiper-pagination-bullet{
    background-color: red;
  }

  .swiper-container{
     width:730px;
    margin: 20px auto;
  }
</style>
